Page Transitions In Next.js 13 With App Router And The Built-In View Transitions API (No Third-Party Libraries)

After we have successfully talked about using the View Transitions API with the Vanilla JavaScript and then with ReactJS, to animate transitions between different routes (or views) of our application, We will go step by step in a new tutorial with the same subject, But now we will use NextJS 13 with the new App Router structure, All that using only CSS, no extra third-party libraries are needed.


Table of contents

  • What is the View Transitions API
  • Is View Transition API wildly adopted by modern browsers?
  • Before going with this tutorial
  • What we are building?
  • Let’s code
  • Full complete source code (on GitHub)
  • Live Demo with source code (on Codesandbox)


What is the View Transitions API

View Transitions API provides a way to create an animated transition between two documents (Views), without creating an overlap in the transition.

View Transitions make this process easy and strait-full, by allowing you to make your DOM change without any overlap between states, by creating a transition animation between the states using snap-shotted views.

The current implementation of this API targets single page applications (SPAs), In this tutorial we will explain how to do that using NextJS 13 with the new App folder.

Read more about View Transitions API here.


Is View Transitions API wildly adopted by modern browsers?

At the time when this article is written, View Transitions API is adopted by Chrome (v 111+), Edge browser (v 111+) and Opera browser (v 97+) all in the production versions, and on Android system : on android browser and Chrome for android.


Before going with this tutorial

We have talked about View Transitions API before in this article:


Create Dynamic Web page Transitions with the Built-In View Transitions API No Third-Party Libraries

Despite the availability of existing animation APIs like CSS transitions, CSS animations, and the Web Animation API…

javascript.plainenglish.io


We had explained what this API, how to enable it in all supported browsers and how to use it, All that in a step-by-step guide, with a working application (MPA: multipage application), with full source code, all using only Vanilla JavaScript.

You must carefully read the CSS implementation before going on with tihs tutorial, because we will not explain the View Transitions API again.

Then in a second article, in the same subject, we have talked about using the same View Transitions API, but we had used ReactJS.


Page Transitions In ReactJS With React Router V6 And The Built-In View Transitions API (No…

After we have successfully used ReactJS, React Router and framer-motion to animate transitions between different routes…

javascript.plainenglish.io


Now we will continue in the same approach, but now using the new NextJS 13 with app router and without using any extra third parties libraries, all of that using CSS.

What we are building

In this article, we will create a multipage application, using NextJS 13 and the App Router structure, we will use the new View Transitions API to create animations when we navigate between different views (pages) all of that using only CSS.

In our application, we have three different animations:

  • View animation (grow up)
  • Header Animation (slide from the right)
  • Content Animation (slide from the left)

This is an animated GIF, showing our final application in action: